<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="text" style="width: 600px;" v-model="strCom">
    <hr/>
    <button @click="num+=100">{{num}}</button>
    <hr/>
    <input style="width:500px;" type="text" :value="str">
    <hr/>
    <p>{{str.split("").reverse().join("")}}</p>
    <p>{{str.split("").reverse().join("")}}</p>
    <hr/>
    <p>{{fnStr()}}</p>
    <p>{{fnStr()}}</p>
    <hr/>
    <p>{{str | strFilter}}</p>
    <p>{{str | strFilter}}</p>
    <p>{{str | strFilter}}</p>
    <hr/>
    <p>{{strCom}}</p>
    <p>{{strCom}}</p>
    <p>{{strCom}}</p>
    <p>{{strCom}}</p>
    <p>{{strCom}}</p>
    <p>{{strCom}}</p>
</div>
</body>
<script>
    // 计算属性：
    // 1- 计算属性需要通过配置对象中的computed选项来设置
    // 2- computed的类型是一个对象，对象下的属性名即是计算属性的名字。
    //    2-1- 计算属性的值可以是对象
    //    2-2- 计算属性的值可以是函数
    // 3- 特点：有缓存
    //    计算属性中所用到的计算结果的数据一旦发生变化，计算属性会重新进行计算。
    //    如果响应计算结果的数据不变，不会重新执行。
    //    (第一次执行：计算属性运行后会将结果进行缓存。下一次执行的条件是：影响计算结果的数据发生变化。)
	const vm = new Vue({
		el: "#root",
        data:{
			num:100,
			str:"过不了多久，我就开始写联合项目啦！"
        },
        methods:{
			fnStr(){
				console.log("fnStr");
				return this.str.split("").reverse().join("");
            }
        },
        filters:{
			strFilter(v){
				console.log("strFilter");
				return v.split("").reverse().join("");
            }
        },
        computed:{
            // strCom(){
			// 	console.log("strCom")
			// 	// 返回值即是计算结果
			// 	return this.str.split("").reverse().join("");
            // }

            strCom:{
				get(){
					return  this.str.split("").reverse().join("");
                },
                set(v){
					// console.log("set",v)
                    // this.str = v;
                    this.str = v.split("").reverse().join("");
                }
            }
        }
	})
</script>
</html>